<style>
        .cross{
                text-align: center;
                color:red;
                position: absolute;
                margin-left: 180px;
                margin-top:0px;
                height:18px;
                width:18px;
                z-index: 99;
                background: #FFF;
                border:2px solid red;
                border-radius: 50%;
                font-size: 14px;
                font-weight: bold;
        }
        .cross:hover{
                color:red;
                box-shadow: 0 0 6px red;
        }
        .cancel{
                display:inline-block;
                margin-left:10px;
        }
        .week{
                display: inline-block;
        }
</style>
<div class="bjui-pageContent" >
        <div data-layout-h="0">
                <!-- 内容区 -->
                <form class="pageForm nice-validator n-red" data-loadingmask='false' data-toggle="validate" novalidate="novalidate" data-reload-navtab="true" method="post" onsubmit="return addCase(this);">
                        <input type="hidden" name="id" value="" />
                        <table class="table table-condensed table-hover add_case" >
                                <tr>
                                        <th ><label style='margin-left:40px;'>方案标题：</label></th>
                                        <td>
                                                <input type="text" data-rule="required" name="title" />
                                        </td>

                                </tr>
                                <tr>
                                        <th ><label style='margin-left:40px;'>方案说明：</label></th>
                                        <td>
                                                <textarea type="text" name="content" ></textarea>
                                        </td>

                                </tr>
                                <tr>
                                        <td colspan='2'><label style=''>
                                                        <ul >
                                                                <li>
                                                                        <a id="case_add_price_day" class="btn btn-orange" href="javascript:;" data-icon='plus'>添加按天计价</a>
                                                                        <a id="case_add_price_week" class="btn btn-orange" href="javascript:;"  data-icon='plus'>添加按周计价</a>
                                                                        <a id="case_add_price_month" class="btn btn-orange" href="javascript:;"  data-icon='plus'>添加按月计价</a>
                                                                        <a id="case_add_price_diy" class="btn btn-orange" href="javascript:;"  data-icon='plus'>添加自定义计价</a>
                                                                </li>
                                                        </ul>
                                                </label></td>
                                </tr>
                        </table>
                        <!--可拖动排序框开始-->
                        <div style="">
                                <ul class="dragsort" id="case_price_drag">
                                </ul>
                        </div>
                </form>
        </div>

</div>
<div class="bjui-pageFooter" border='none'>
        <ul>
                <li><button type="button" class="btn btn-close">关闭</button></li>
                <li><button type="submit" class="btn btn-default">提交</button></li>
        </ul>
</div>
<script type="text/html" id="case_price_day" >
        <li>
                <div class="panel panel-default">
                        <input type="hidden" name="price[#index#][type]" value="1" />
                        <div class="panel-heading panelContent"> 
                                <h4 class="panel-title">
                                        按天计价
                                        <a href="javascript:;" class="cross" style="margin-left:0px; right:30px;color:red;"  onclick=" $(this).parent().parent().parent().remove();
                                           ">X</a>
                                </h4>
                        </div>
                        <div class="panel-collapse panelContent collapse in">
                                <table style="margin-left:20px;">
                                        <tr>
                                                <th width="100">有&nbsp;效&nbsp;期：</th>
                                                <td><input data-toggle="datepicker" type="text" name="price[#index#][start_time]" />&nbsp;至&nbsp;<input data-toggle="datepicker" type="text" name="price[#index#][end_time]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">成&nbsp; 人&nbsp;价：</th>
                                                <td><input type="text" name="price[#index#][adult]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">儿&nbsp; 童&nbsp;价：</th>
                                                <td><input type="text" name="price[#index#][child]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">同&nbsp; 行&nbsp;价：</th>
                                                <td><input type="text" name="price[#index#][tonghang]"/></td>
                                        </tr>
                                </table>
                        </div>
                </div>
        </li>
</script>
<script type="text/html" id="case_price_week" >
        <li>
                <div class="panel panel-default">
                        <input type="hidden" name="price[#index#][type]" value="2" />
                        <div class="panel-heading panelContent"> 
                                <h4 class="panel-title">
                                        按周计价
                                        <a href="javascript:;" class="cross" style="margin-left:0px; right:30px;color:red;"  onclick=" $(this).parent().parent().parent().remove();
                                           ">X</a>
                                </h4>
                        </div>
                        <div class="panel-collapse panelContent collapse in">
                                <table style="margin-left:20px;">
                                        <tr>
                                                <th width="100">有&nbsp;效&nbsp;期：</th>
                                                <td colspan="7"><input data-toggle="datepicker" type="text" name="price[#index#][start_time]"  />&nbsp;至&nbsp;<input data-toggle="datepicker" type="text" name="price[#index#][end_time]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">&nbsp;</th>
                                                <td>星期一</td>
                                                <td>星期二</td>
                                                <td>星期三</td>
                                                <td>星期四</td>
                                                <td>星期五</td>
                                                <td>星期六</td>
                                                <td>星期日</td>
                                        </tr>
                                        <tr>
                                                <th width="100">成&nbsp; 人&nbsp;价：</th>
                                                <td><input type="text" size="5" name="price[#index#][adult_monday]"/></td>
                                                <td><input type="text" size="5" name="price[#index#][adult_tuesday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][adult_wednesday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][adult_thursday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][adult_friday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][adult_saturday]"/></td>
                                                <td><input type="text" size="5" name="price[#index#][adult_sunday]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">儿&nbsp; 童&nbsp;价：</th>
                                                <td><input type="text" size="5" name="price[#index#][child_monday]"/></td>
                                                <td><input type="text" size="5" name="price[#index#][child_tuesday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][child_wednesday]" /></td>
                                                <td><input type="text"  size="5"name="price[#index#][child_thursday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][child_friday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][child_saturday]"/></td>
                                                <td><input type="text" size="5" name="price[#index#][child_sunday]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">同&nbsp; 行&nbsp;价：</th>
                                                <td><input type="text" size="5" name="price[#index#][tonghang_monday]"/></td>
                                                <td><input type="text" size="5" name="price[#index#][tonghang_tuesday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][tonghang_wednesday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][tonghang_thursday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][tonghang_friday]" /></td>
                                                <td><input type="text" size="5" name="price[#index#][tonghang_saturday]"/></td>
                                                <td><input type="text" size="5" name="price[#index#][tonghang_sunday]"/></td>
                                        </tr>
                                </table>
                        </div>
                </div>
        </li>
</script>
<script type="text/html" id="case_price_month" >
        <li>
                <div class="panel panel-default">
                        <input type="hidden" name="price[#index#][type]" value="3" />
                        <div class="panel-heading panelContent"> 
                                <h4 class="panel-title">
                                        按月计价
                                        <a href="javascript:;" class="cross" style="margin-left:0px; right:30px;color:red;"  onclick=" $(this).parent().parent().parent().remove();
                                           ">X</a>
                                </h4>
                        </div>
                        <div class="panel-collapse panelContent collapse in">
                                <table style="margin-left:20px;">
                                        <tr>
                                                <th width="100">有&nbsp;效&nbsp;期：</th>
                                                <td><input data-toggle="datepicker" type="text" name="price[#index#][start_time]" />&nbsp;至&nbsp;<input data-toggle="datepicker" type="text" name="price[#index#][end_time]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">&nbsp;</th>
                                                <td> <span class='week'><select data-toggle="selectpicker" name="price[#index#][day][]">
                                                                        {for start="1" end="32"}
                                                                        <option value="{$i}">&nbsp;{$i}&nbsp;</option>
                                                                        {/for}
                                                                </select></span>
                                                        <div class="week">
                                                                <a id="case_price_month_add" class="btn btn-orange" href="javascript:;" data-icon='plus'>添加</a>
                                                        </div></td>
                                        </tr>
                                        <tr >
                                                <th width="100">成&nbsp; 人&nbsp;价：</th>
                                                <td class="k1"><span class='week'><input type="text" size="5" name="price[#index#][adult][]"/></span></td>
                                        </tr>
                                        <tr >
                                                <th width="100">儿&nbsp; 童&nbsp;价：</th>
                                                <td class="k2"><span class='week'><input type="text" size="5" name="price[#index#][child][]"/></span></td>
                                        </tr>
                                        <tr >
                                                <th width="100">同&nbsp; 行&nbsp;价：</th>
                                                <td class="k3"><span class='week'><input type="text" size="5" name="price[#index#][tonghang][]"/></span></td>
                                        </tr>

                                </table>
                        </div>
                </div>
        </li>
</script>
<script type="text/html" id="case_price_diy" >
        <li>
                <div class="panel panel-default">
                        <input type="hidden" name="price[#index#][type]" value="1" />
                        <div class="panel-heading panelContent"> 
                                <h4 class="panel-title">
                                        自定义计价
                                        <a href="javascript:;" class="cross" style="margin-left:0px; right:30px;color:red;"  onclick=" $(this).parent().parent().parent().remove();
                                           ">X</a>
                                </h4>
                        </div>
                        <div class="panel-collapse panelContent collapse in">
                                <table style="margin-left:20px;">
                                        <tr>
                                                <th width="100">有&nbsp;效&nbsp;期：</th>
                                                <td><input data-toggle="datepicker" type="text" name="price[#index#][start_time]" /></td>
                                        </tr>
                                        <tr>
                                                <th width="100">成&nbsp; 人&nbsp;价：</th>
                                                <td><input type="text" name="price[#index#][adult]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">儿&nbsp; 童&nbsp;价：</th>
                                                <td><input type="text" name="price[#index#][child]"/></td>
                                        </tr>
                                        <tr>
                                                <th width="100">同&nbsp; 行&nbsp;价：</th>
                                                <td><input type="text" name="price[#index#][tonghang]"/></td>
                                        </tr>
                                </table>
                        </div>
                </div>
        </li>
</script>
<script id="case_price_month_head" type="text/html">
        <span><select data-toggle='selectpicker' name="price[#index#][day][]">
                        {for start="1" end="32"}
                        <option value="{$i}">&nbsp;{$i}&nbsp;</option>
                        {/for}
                </select></span>
</script>
<script id="case_price_month_adult" type="text/html">
        <span><input  type="text" class='adult' value="" size="5" name="price[#index#][adult][]"/></span>
</script>
<script id="case_price_month_tonghang" type="text/html">
        <span><input  type="text" class='tonghang' value="" size="5" name="price[#index#][tonghang][]"/></span>
</script>
<script id="case_price_month_child" type="text/html">
        <span><input  type="text" class='child' value="" size="5" name="price[#index#][child][]"/></span>
</script>
<script id="caseTemplate" type="text/html">
        <li>
                <div class="panel panel-default" id="{id}">
                        <div class="panel-heading panelContent" > 
                                <h4 class="panel-title" >
                                        {title}
                                        <a href="javascript:;" class="cross" id="edit" style="margin-left:0px; right:60px;color:red;"  >&#43;</a>
                                        <a href="javascript:;" class="cross" style="margin-left:0px; right:30px;color:red;"  onclick=" $(this).parent().parent().parent().remove();
                                           ">X</a>
                                </h4>
                        </div>
                        <div class="panel-collapse panelContent collapse in">
                                <table style="margin-left:20px;">
                                        <tr>
                                                <td>
                                                        <input type="hidden" name="case[{id}][id]" value="{case_id}" />
                                                        <input type="hidden" name="case[{id}][title]" value="{title}" />
                                                        <textarea name="case[{id}][content]" style="display: none;">{content}</textarea>
                                                        {each price as value index}
                                                        <input type="hidden" name="case[{id}][price][]" value='{value}' />
                                                        {/each}
                                                        {content.replace(/<[^>].*?>/g, "")}
                                                </td>
                                        </tr>
                                </table>
                        </div>
                </div>
        </li>
</script>
<script type="text/javascript">
        var case_id;
        $(function() {
                var dialog = $.CurrentDialog;
                //在bjui-dialog中重构了param的data传参方法，BY胡小奇
                var param = dialog.data('param');
                if (param) {
                        case_id = param.id;
                        $("input[name='id']", ".add_case").val(param.case_id);
                        $("input[name='title']", ".add_case").val(param.title);
                        $("textarea[name='content']", ".add_case").val(param.content);
                        $.each(param.price, function(i, v) {
                                v = BJUI.jsonEval(v);
                                switch (v.type) {
                                        case '1':
                                                var html = $(template("case_price_day", {}));
                                                $("input[name*='start_time']", html).val(v.start_time);
                                                $("input[name*='end_time']", html).val(v.end_time);
                                                $("input[name*='adult']", html).val(v.adult);
                                                $("input[name*='tonghang']", html).val(v.tonghang);
                                                $("input[name*='child']", html).val(v.child);
                                                $("#case_price_drag").append(html);
                                                break;
                                        case '2':
                                                var html = $(template("case_price_week", {}));
                                                $("input[name*='start_time']", html).val(v.start_time);
                                                $("input[name*='end_time']", html).val(v.end_time);

                                                $("[name='price[#index#][adult_monday]']", html).val(v.adult_monday);
                                                $("[name='price[#index#][adult_tuesday]']", html).val(v.adult_tuesday);
                                                $("[name='price[#index#][adult_wednesday]']", html).val(v.adult_wednesday);
                                                $("[name='price[#index#][adult_thursday]']", html).val(v.adult_thursday);
                                                $("[name='price[#index#][adult_friday]']", html).val(v.adult_friday);
                                                $("[name='price[#index#][adult_saturday]']", html).val(v.adult_saturday);
                                                $("[name='price[#index#][adult_sunday]']", html).val(v.adult_sunday);

                                                $("[name='price[#index#][tonghang_monday]']", html).val(v.tonghang_monday);
                                                $("[name='price[#index#][tonghang_tuesday]']", html).val(v.tonghang_tuesday);
                                                $("[name='price[#index#][tonghang_wednesday]']", html).val(v.tonghang_wednesday);
                                                $("[name='price[#index#][tonghang_thursday]']", html).val(v.tonghang_thursday);
                                                $("[name='price[#index#][tonghang_friday]']", html).val(v.tonghang_friday);
                                                $("[name='price[#index#][tonghang_saturday]']", html).val(v.tonghang_saturday);
                                                $("[name='price[#index#][tonghang_sunday]']", html).val(v.tonghang_sunday);

                                                $("[name='price[#index#][child_monday]']", html).val(v.child_monday);
                                                $("[name='price[#index#][child_tuesday]']", html).val(v.child_tuesday);
                                                $("[name='price[#index#][child_wednesday]']", html).val(v.child_wednesday);
                                                $("[name='price[#index#][child_thursday]']", html).val(v.child_thursday);
                                                $("[name='price[#index#][child_friday]']", html).val(v.child_friday);
                                                $("[name='price[#index#][child_saturday]']", html).val(v.child_saturday);
                                                $("[name='price[#index#][child_sunday]']", html).val(v.child_sunday);

                                                $("#case_price_drag").append(html);
                                                break;
                                        case '3':
                                                var html = $(template("case_price_month", {}));
                                                var button = $("#case_price_month_add", html);
                                                $("input[name*='start_time']", html).val(v.start_time);
                                                $("input[name*='end_time']", html).val(v.end_time);
                                                button.parents("td").find(".week").eq(0).remove();
                                                $.each(v.day, function(j, o) {
                                                        var html1 = $(template("case_price_month_head", {}));
                                                        $("select[name*='day']", html1).val(o);
                                                        button.parents(".week").before(html1);
                                                });
                                                button.parents("table").find(".k1").find(".week").eq(0).remove();
                                                $.each(v.adult, function(j, o) {
                                                        var html = $(template("case_price_month_adult", {}));
                                                        $("input[name*='adult']", html).val(o);
                                                        button.parents('table').find('.k1').eq(0).append(html);
                                                });

                                                button.parents("table").find(".k3").find(".week").eq(0).remove();
                                                $.each(v.tonghang, function(j, o) {
                                                        var html = $(template("case_price_month_tonghang", {}));
                                                        $("input[name*='tonghang']", html).val(o);
                                                        button.parents('table').find('.k3').eq(0).append(html);
                                                });

                                                button.parents("table").find(".k2").find(".week").eq(0).remove();
                                                $.each(v.child, function(j, o) {
                                                        var html = $(template("case_price_month_child", {}));
                                                        $("input[name*='child']", html).val(o);
                                                        button.parents('table').find('.k2').eq(0).append(html);
                                                });
                                                $("#case_price_drag").append(html);
                                                break;
                                        case '4':
                                                var html = $(template("case_price_diy", {}));
                                                $("input[name*='start_time']", html).val(v.start_time);
                                                $("input[name*='adult']", html).val(v.adult);
                                                $("input[name*='tonghang']", html).val(v.tonghang);
                                                $("input[name*='child']", html).val(v.child);
                                                $("#case_price_drag").append(html);
                                                break;
                                }
                        });

                } else {
                        case_id = "case_" + $("#case_drag").children().size();
                }

                $("#case_add_price_day").click(function() {
                        var html = document.getElementById("case_price_day").innerHTML;
                        $("#case_price_drag").prepend(html).initui();
                });
                $("#case_add_price_week").click(function() {
                        var html = document.getElementById("case_price_week").innerHTML;
                        $("#case_price_drag").prepend(html).initui();
                });
                $("#case_add_price_month").click(function() {
                        var html = document.getElementById("case_price_month").innerHTML;
                        $("#case_price_drag").prepend(html).initui();
                });
                $("#case_add_price_diy").click(function() {
                        var html = document.getElementById("case_price_diy").innerHTML;
                        $("#case_price_drag").prepend(html).initui();
                });
                $("#case_price_drag").on('click', '#case_price_month_add', function() {
                        var dayk = document.getElementById("case_price_month_head").innerHTML;
                        $(this).parent().before(dayk);
                        var chengren = document.getElementById("case_price_month_adult").innerHTML;
                        var tonghang = document.getElementById("case_price_month_tonghang").innerHTML;
                        var ertong = document.getElementById("case_price_month_child").innerHTML;
                        $(this).parents('table').find('.k1').append(chengren).initui();
                        $(this).parents('table').find('.k3').append(tonghang).initui();
                        $(this).parents('table').find('.k2').append(ertong).initui();
                });
        });
        $("#case_price_drag").dragsort({
                dragSelector: "div",
                dragBetween: false,
                dragSelectorExclude: "a.cross,div.panel-collapse",
                placeHolderTemplate: "<li><div></div></li>",
                scrollSpeed: 5
        });
        function addCase(form) {
                var $form = $(form);
                if ($form.find("input[name='title']").val() === '') {
                        return false;
                }
                var type, price, price_value = [];
                $("#case_price_drag").find(".panel").each(function(i) {
                        price = {};
                        type = $("[name='price[#index#][type]']", this).val();
                        switch (type) {
                                case '1':
                                        if ($("[name='price[#index#][adult]']", this).val() > 0) {
                                                price.type = type;
                                                price.start_time = $("[name='price[#index#][start_time]']", this).val();
                                                price.end_time = $("[name='price[#index#][end_time]']", this).val();
                                                price.adult = $("[name='price[#index#][adult]']", this).val();
                                                price.tonghang = $("[name='price[#index#][tonghang]']", this).val();
                                                price.child = $("[name='price[#index#][child]']", this).val();
                                        }
                                        break;
                                case '2':
                                        if ($("[name='price[#index#][adult_monday]']", this).val() > 0
                                                || $("[name='price[#index#][adult_tuesday]']", this).val()
                                                || $("[name='price[#index#][adult_wednesday]']", this).val()
                                                || $("[name='price[#index#][adult_thursday]']", this).val()
                                                || $("[name='price[#index#][adult_friday]']", this).val()
                                                || $("[name='price[#index#][adult_saturday]']", this).val()
                                                || $("[name='price[#index#][adult_sunday]']", this).val()) {
                                                price.type = type;
                                                price.start_time = $("[name='price[#index#][start_time]']", this).val();
                                                price.end_time = $("[name='price[#index#][end_time]']", this).val();

                                                price.adult_monday = $("[name='price[#index#][adult_monday]']", this).val();
                                                price.adult_tuesday = $("[name='price[#index#][adult_tuesday]']", this).val();
                                                price.adult_wednesday = $("[name='price[#index#][adult_wednesday]']", this).val();
                                                price.adult_thursday = $("[name='price[#index#][adult_thursday]']", this).val();
                                                price.adult_friday = $("[name='price[#index#][adult_friday]']", this).val();
                                                price.adult_saturday = $("[name='price[#index#][adult_saturday]']", this).val();
                                                price.adult_sunday = $("[name='price[#index#][adult_sunday]']", this).val();

                                                price.tonghang_monday = $("[name='price[#index#][tonghang_monday]']", this).val();
                                                price.tonghang_tuesday = $("[name='price[#index#][tonghang_tuesday]']", this).val();
                                                price.tonghang_wednesday = $("[name='price[#index#][tonghang_wednesday]']", this).val();
                                                price.tonghang_thursday = $("[name='price[#index#][tonghang_thursday]']", this).val();
                                                price.tonghang_friday = $("[name='price[#index#][tonghang_friday]']", this).val();
                                                price.tonghang_saturday = $("[name='price[#index#][tonghang_saturday]']", this).val();
                                                price.tonghang_sunday = $("[name='price[#index#][tonghang_sunday]']", this).val();

                                                price.child_monday = $("[name='price[#index#][child_monday]']", this).val();
                                                price.child_tuesday = $("[name='price[#index#][child_tuesday]']", this).val();
                                                price.child_wednesday = $("[name='price[#index#][child_wednesday]']", this).val();
                                                price.child_thursday = $("[name='price[#index#][child_thursday]']", this).val();
                                                price.child_friday = $("[name='price[#index#][child_friday]']", this).val();
                                                price.child_saturday = $("[name='price[#index#][child_saturday]']", this).val();
                                                price.child_sunday = $("[name='price[#index#][child_sunday]']", this).val();
                                        }
                                        break;
                                case '3':
                                        price.type = type;
                                        price.start_time = $("[name='price[#index#][start_time]']", this).val();
                                        price.end_time = $("[name='price[#index#][end_time]']", this).val();
                                        price.day = [];
                                        $("select[name='price[#index#][day][]']", this).each(function() {
                                                price.day.push($(this).val());
                                        });
                                        price.adult = [];
                                        $("[name='price[#index#][adult][]']", this).each(function() {
                                                price.adult.push($(this).val());
                                        });
                                        price.tonghang = [];
                                        $("[name='price[#index#][tonghang][]']", this).each(function() {
                                                price.tonghang.push($(this).val());
                                        });
                                        price.child = [];
                                        $("[name='price[#index#][child][]']", this).each(function() {
                                                price.child.push($(this).val());
                                        });

                                        break;
                                case '4':
                                        if ($("[name='price[#index#][adult]']", this).val() > 0) {
                                                price.type = type;
                                                price.start_time = $("[name='price[#index#][start_time]']", this).val();
                                                price.adult = $("[name='price[#index#][adult]']", this).val();
                                                price.tonghang = $("[name='price[#index#][tonghang]']", this).val();
                                                price.child = $("[name='price[#index#][child]']", this).val();
                                        }
                                        break;
                        }
                        price_value.push(BJUI.obj2str(price));
                });
                var data = {};
                data['id'] = case_id;
                data['case_id'] = $form.find("input[name='id']").val();
                data['title'] = $form.find("input[name='title']").val();
                data['content'] = $form.find("textarea[name='content']").val();
                data['price'] = price_value;
                var html = $(template("caseTemplate", data)).html();
                if ($("#" + case_id).size() > 0) {
                        $("#" + case_id).replaceWith(html);
                } else {
                        $("#case_drag").append(html).initui();
                }
                $(this).dialog('closeCurrent');
                return false;
        }
</script>
